<style>
  .layui-badge-rim {
    height: 20px;
    border-width: 1px;
    border-style: solid;
    background-color: #eef4f5;
    font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
    color: #6e667d;
  }

  .import {
    opacity: 0;
    position: absolute;
    width: 69px;
    height: 38px;
    margin-left: -10px;
  }
</style>

<!-- 正文开始 -->
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <!-- 头部操作栏 -->
      <div class="layui-form lay-header">
        <div class="toolbar">
          <div class="layui-form-item lay-query-content">
            <div class="lay-query-box">
              <div class="query-lt">
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">状态：</label>
                  <div class="layui-input-inline">
                    <select
                      name="status"
                      lay-filter="status"
                      class="common-select-search"
                    >
                      <option value="">请选择</option>
                      <option value="0">正常</option>
                      <option value="1">作废</option>
                    </select>
                  </div>
                </div>
                <!-- 是否默认 -->
                <div class="layui-inline">
                  <label class="layui-form-label">是否默认：</label>
                  <div class="layui-input-inline">
                    <select
                      name="isDefault"
                      lay-filter="isDefault"
                      class="common-select-search"
                    >
                      <option value="">请选择</option>
                      <option value="1">是</option>
                      <option value="0">否</option>
                    </select>
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label">BOM版本编号：</label>
                  <div class="layui-input-inline">
                    <input
                      name="code"
                      id="code"
                      class="layui-input"
                      type="text"
                      placeholder="请输入版本编号"
                      autocomplete="off"
                    />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">BOM版本名称：</label>
                  <div class="layui-input-inline">
                    <input
                      name="name"
                      id="name"
                      class="layui-input"
                      type="text"
                      placeholder="请输入版本名称"
                      autocomplete="off"
                    />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">物资SKU料号：</label>
                  <div class="layui-input-inline">
                    <input
                      type="text"
                      class="layui-input"
                      id="skuCode"
                      name="skuCode"
                      placeholder="物资SKU料号"
                    />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">所属SKU编号：</label>
                  <div class="layui-input-inline">
                    <input
                      type="text"
                      class="layui-input"
                      id="skuNo"
                      name="skuNo"
                      placeholder="所属SKU编号"
                    />
                  </div>
                </div>
              </div>
              <div class="query-rt">
                <div class="layui-inline">
                  <button
                    class="layui-btn icon-btn color-green"
                    lay-filter="formSubSearchLog"
                    lay-submit
                    layui-form-keyDownSearch="true"
                  >
                    查询
                  </button>
                  <button
                    class="layui-btn icon-btn color-white"
                    lay-filter="resets"
                    lay-submit
                  >
                    重置
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="lay-btn-rows">
          <div class="lay-btn-box">
            <div class="lay-btn-lt">
              <button
                id="uploaderInputBut"
                class="layui-btn icon-btn color-reseda"
              >
                <input
                  id="uploaderInput"
                  type="file"
                  name="file"
                  class="import"
                  accept=".xls,.xlsx"
                />导入
              </button>
              <button
                id="downTemplate"
                type="button"
                class="layui-btn icon-btn color-reseda"
              >
                下载模板
              </button>
              <button
                id="configFun"
                style="display: none"
                class="layui-btn icon-btn color-reseda"
                type="button"
              >
                确认选择
              </button>
            </div>
            <div class="lay-btn-rt"></div>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <table
        class="layui-table"
        id="productDrawInfo"
        lay-filter="productDrawInfo"
      ></table>
    </div>
  </div>
</div>

<script type="text/html" id="viewAttachmentHtml">
  <div id="example1" style="height: 100%;"></div>
</script>

<!-- 表格操作列 -->
<script type="text/html" id="productDrawTableBar">
  <a class="layui-btn  layui-btn-xs" lay-event="modelDraw">模具图纸</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail"
    >详情</a
  >
  <!-- {{# if(d.isDeleted==false){  }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="cancel">作废</a>
    {{# } }}
    {{# if(d.isDeleted==true){  }}
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="recover">恢复</a>
    {{# } }}
    {{# if(d.isDefault=='0'){  }}
    <a class="layui-btn layui-btn-xs" lay-event="default">设为默认</a>
    {{# } }} -->
</script>

<!-- 模具图纸 -->
<script type="text/html" id="modelDrawHtml">
  <form lay-filter="proDrawForm" class="layui-form open-form">
    <div class="open-model">
      <div class="open-auto">
        <button class="layui-btn" type="button" id="addModelDraw">
          添加新的模具图纸
        </button>
        <table
          class="layui-table"
          lay-filter="modelDrawTable"
          id="modelDrawTable"
        ></table>
      </div>
      <div class="layui-form-item text-right">
        <button
          class="layui-btn layui-btn-primary"
          type="button"
          ew-event="closeDialog"
        >
          关闭
        </button>
      </div>
    </div>
  </form>
</script>
<!-- 表格操作列 -->
<script type="text/html" id="modelDrawTableBar">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail"
    >详情</a
  >
</script>
<!-- js部分 -->
<script>
  layui.use(
    [
      "layer",
      "form",
      "table",
      "laydate",
      "admin",
      "laytpl",
      "tableTreeDj",
      "config",
    ],
    function () {
      var $ = layui.jquery;
      var layer = layui.layer;
      var table = layui.table;
      var form = layui.form;
      var config = layui.config;
      var admin = layui.admin;
      // console.log("parentData", parentData);
      let taskId = "";
      if (typeof parentData !== "undefined") {
        taskId = parentData.taskId ? parentData.taskId : "";
      }
      //渲染下拉
      form.render("select");
      let nowData = {};
      let where = {};
      if (typeof parentData !== "undefined") {
        nowData = { ...parentData };
        if (nowData.eventName == "radio" || nowData.eventName == "checkbox") {
          $("#configFun").show();
        }
        where={...nowData.where}
      }
      // 渲染表格
      var insTb = table.render({
        id: "#productDrawInfo",
        elem: "#productDrawInfo",
        url: config.base + "enterprise/res/admin/proDraw/list",
        where: {
          taskId: taskId ? taskId : "",
          ...where
        },
        page: true,
        cellMinWidth: 100,
        cols: [
          [
            { type: "radio", hide: !nowData.eventName == "radio" },
            { type: "numbers", title: "序号", fixed: "center" },
            { field: "code", title: "图纸编号", fixed: "center", width: 160 },
            { field: "versionName", title: "图纸版本名称", fixed: "center" },
            { field: "taskNo", title: "基准书/任务编号", fixed: "center" },
            {
              field: "name",
              title: "图纸文件",
              fixed: "center",
              templet: function (d) {
                return '<span class="layui-badge-rim">' + d.name + "</span>";
              },
              event: "imgClick",
            },
            { field: "skuCode", title: "产品SKU料号", fixed: "center" },
            { field: "assemblyNatureName", title: "产品性质", fixed: "center" },
            { field: "drawTypeName", title: "图纸类别", fixed: "center" },
            {
              field: "isDeleted",
              fixed: "center",
              title: "状态",
              templet: (d) => (d.isDeleted ? "作废" : "正常"),
              width: 80,
            },
            {
              field: "isDefault",
              fixed: "center",
              templet: (d) => (d.isDefault === "1" ? "是" : "否"),
              title: "是否默认版本",
            },
            // , {field: 'createTime',fixed: 'center', title: '创建时间', width: 160}
            // , {field: 'creatorName',fixed: 'center', title: '创建人'}
            {
              align: "center",
              toolbar: "#productDrawTableBar",
              title: "操作",
              width: 220,
            },
          ],
        ],
        done: function (res, curr, count) {
          //移除按钮
          var menuButton = config.getMenuButton(location.hash);
          // if (menuButton.indexOf("搜索") == -1) {
          //   $(".layui-form.toolbar").remove();
          // }
          // if (menuButton.indexOf("修改") == -1) {
          //   $("[lay-event='edit']").remove();
          // }
          // if (menuButton.indexOf("删除") == -1) {
          //   $("[lay-event='del']").remove();
          // }
        },
      });

      // 工具条点击事件
      table.on("tool(productDrawInfo)", function (obj) {
        var data = obj.data;
        if (obj.event === "default") {
          //修改
          doDefault(data);
        } else if (obj.event === "imgClick") {
          let json = {};
          json.attachment = data.fileUrl;
          showViewAttachmentModel(json);
        } else if (obj.event === "detail") {
          //详情
          showDetailModel(data);
        } else if (obj.event === "recover") {
          //恢复
          doRecover(data);
        } else if (obj.event === "cancel") {
          //作废
          doCancel(data);
        } else if (obj.event === "modelDraw") {
          admin.formOpen({
            type: 1,
            area: ["1580px", "75%"],
            style: "font-size: 20px;",
            title: "模具图纸",
            content: $("#modelDrawHtml").html(),
            success: function () {
              console.log(111);

              table.render({
                id: "modelDrawTable",
                elem: "#modelDrawTable",
                url: config.base + "enterprise/res/admin/proMoldDraw/list",
                where: {
                  drawId: data.id,
                },
                cols: [
                  [
                    {
                      field: "code",
                      title: "图纸编号",
                      fixed: "center",
                      width: 160,
                    },
                    { field: "name", title: "图纸名称", fixed: "center" },
                    { field: "remark", title: "备注", fixed: "center" },
                    { field: "creatorName", title: "创建人", fixed: "center" },
                    { field: "createTime", title: "创建时间", fixed: "center" },
                    {
                      align: "center",
                      toolbar: "#modelDrawTableBar",
                      title: "操作",
                      width: 220,
                    },
                  ],
                ],
                page: true,
              });
              table.on("tool(modelDrawTable)", function (obj) {
                if (obj.event === "detail") {
                  openModelDrawForm("detail", obj.data);
                } else if (obj.event === "edit") {
                  openModelDrawForm("edit", obj.data);
                }
              });

              function openModelDrawForm(eventName, obj) {
                admin.formOpen({
                  type: 1,
                  area: ["600px", "75%"],
                  title: "模具图纸",
                  path: "components/res/draw/modelDrawForm.html",
                  success: function () {
                    parentData.data = obj;
                    parentData.drawId = data.id;
                    parentData.productDetailId = data.productDetailId;
                    parentData.eventName = eventName;
                  },
                });
              }
              $("#addModelDraw").click(function () {
                // table.reload("modelDrawTable", {});
                openModelDrawForm("add");
              });
            },
          });
        }
      });

      //设置为默认
      function doDefault(data) {
        layer.confirm(
          "确认设为默认吗？",
          {
            offset: "65px",
            skin: "layui-layer-admin",
          },
          function (i) {
            layer.close(i);
            layer.load(2);
            admin.req(
              "enterprise/res/admin/proDraw/setDefault/" + data.id,
              null,
              function (res) {
                layer.closeAll("loading");
                if (res.code == 200) {
                  layer.msg(res.msg, { icon: 1 });
                  insTb.reload("productDrawInfo");
                } else {
                  layer.msg(res.msg, { icon: 2 });
                }
              },
              "PUT"
            );
          }
        );
      }

      //恢复
      function doRecover(data) {
        layer.confirm(
          "确定要恢复吗？",
          {
            offset: "65px",
            skin: "layui-layer-admin",
          },
          function (i) {
            layer.close(i);
            layer.load(2);
            admin.req(
              "enterprise/res/admin/proDraw/recover/" + data.id,
              null,
              function (res) {
                layer.closeAll("loading");
                if (res.code == 200) {
                  layer.msg(res.msg, { icon: 1 });
                  insTb.reload("productDrawInfo");
                } else {
                  layer.msg(res.msg, { icon: 2 });
                }
              },
              "POST"
            );
          }
        );
      }

      //作废
      function doCancel(data) {
        layer.confirm(
          "确定要作废吗？",
          {
            offset: "65px",
            skin: "layui-layer-admin",
          },
          function (i) {
            layer.close(i);
            layer.load(2);
            admin.req(
              "enterprise/res/admin/proDraw/cancellation/" + data.id,
              null,
              function (res) {
                layer.closeAll("loading");
                if (res.code == 200) {
                  layer.msg(res.msg, { icon: 1 });
                  insTb.reload("productDrawInfo");
                } else {
                  layer.msg(res.msg, { icon: 2 });
                }
              },
              "POST"
            );
          }
        );
      }

      function showViewAttachmentModel(data) {
        admin.open({
          type: 1,
          area: ["60%", "80%"],
          offset: "65px",
          title: "查看附件",
          content: $("#viewAttachmentHtml").html(),
          success: function () {
            if (data.attachment && data.attachment.indexOf(".pdf") !== -1) {
              PDFObject.embed(data.attachment, "#example1");
            } else {
              var attachmentHtml = "";
              data.attachment.split(",").forEach((attachmentUrl, index) => {
                attachmentHtml +=
                  '<div><div><img src="' + attachmentUrl + '"></div></div>';
              });
              $("#example1").html(attachmentHtml);
            }
          },
        });
      }

      // 搜索
      form.on("submit(formSubSearchLog)", function (data) {
        insTb.reload({ where: data.field, page: { curr: 1 } }, "data");
      });

      // 重置搜索
      form.on("submit(resets)", (data) => {
        insTb.reload(
          { where: admin.resetSearch(data.field), page: { curr: 1 } },
          "data"
        );
      });

      //显示详情
      function showDetailModel(data) {
        admin.putTempData("drawData", data);
        let title = "详情";
        let path = "components/res/draw/proDrawDetailFrom.html";
        admin.formOpen({
          type: 1,
          area: ["1580px", "75%"],
          style: "font-size: 20px;",
          title: title,
          path: path,
          finish: function () {
            table.reload("productDrawInfo", {});
          },
        });
      }

      //下载模板的点击事件
      $("#downTemplate").click(function () {
        window.location.href =
          config.base + "enterprise/res/admin/proDraw/template";
      });
      $("#configFun").click(function () {
        let list = table.checkStatus("#productDrawInfo").data;
        childData.list = list;
        layer.close(nowData.zindex);
      });
      // 导入excel
      $("#uploaderInput").on("change", function (e) {
        layer.load(2);
        var formData = new FormData();
        var files = e.target.files;
        let that = $(this);
        formData.append("file", files[0]);
        formData.append("name", files[0].name); //这个地方可以传递多个参数
        $.ajax({
          url: config.base + "enterprise/res/admin/proDraw/importExcel",
          data: formData,
          headers: { Authorization: "Bearer " + config.getToken() },
          type: "POST",
          processData: false,
          contentType: false,
          success: function (res) {
            layer.closeAll("loading");
            if (res.code == 200) {
              layer.msg(res.msg, { icon: 1 });
              layer.closeAll("page");
              setTimeout((_) => {
                location.reload();
              }, 1000);
            } else {
              layer.msg(res.msg, { icon: 2 });
            }
            that.val("");
          },
        });
      });
    }
  );
</script>
